import React, { Component } from 'react'
import { Table, Space, Card, Button, message, Modal , Drawer, Tree} from 'antd';
import { getAllRoles, deleteOneRole } from '../../api/role'
import { getStorage } from '../../utils/stroage';
import { addUsersAuth } from '../../api/user';
const treeData = [
    {
        title: '首页',
        key: '/home',
    },
    {
        title: '用户管理',
        key: '/users',
    },
    {
        title: '角色管理',
        key: '/role',
    },
    {
        title: '商品管理',
        key: '/products',
        children: [
            {
                title: '商品分类',
                key: '/products/categories',
            },
            {
                title: '商品列表',
                key: '/products/list',
            }
        ],
    },
    {
        title: '财务管理',
        key: '/finances',
        children: [
            {
                title: '交易流水',
                key: '/finances/payment',
            },
            {
                title: '销售业绩',
                key: '/finances/sales',
            }
        ],
    },
];
export default class Users extends Component {
    state = {
        data: [],
        isModalVisible: false,
        isAddModal: false,
        drawerVisible: false,
        auth: {
            id: 0,
            authTime: '2022-01-18',
            authUser: '超级管理员',
            menus: []
        }
    }
    componentDidMount() {
        this.getRolesList()
        const userInfo= getStorage('userInfo')
        this.setState({ 
            auth:{
                ...this.state.auth,
                authUser:userInfo.account
            }
         });
    }
    // 获取所有数据
    getRolesList = async () => {
        const res = await getAllRoles()
        console.log('获取到的数据', res.data);
        this.setState({
            data: res.data
        })
    }
    // 删除
    deleteOne = async (id) => {
        const res = await deleteOneRole({ id })
        if (res.code) {
            message.success(res.msg);
            this.getRolesList()
            this.setState({
                isModalVisible: false
            })
        } else {
            message.warning(res.msg);
        }
    }
    // 添加框
    showaddModal = () => {
        this.setState({
            isAddModal: true
        })
    }
    handleaddOk = () => {
        this.setState({
            isAddModal: false
        })
    };
    handleaddCancel = () => {
        this.setState({
            isAddModal: false
        })
    }


    // 设置权限的抽屉
    onDrawerClose = () => {
        this.setState({
            drawerVisible: false
        })
    }
    showDrawer = (id) => {
        this.setState({
            drawerVisible: true,
            auth: {
                ...this.state.auth,
                id
            }
        },
            () => {
                console.log(this.state.auth);
            }
        )
    }
    onTreeCheck = (value) => {
        console.log(value);
        this.setState({
            drawerVisible: true,
            auth: {
                ...this.state.auth,
                menus: value
            }
        })
    }
    addAuth = async () => {
        console.log(this.state.auth);
        const res = await addUsersAuth(this.state.auth)
        console.log('触发的结果', res);
        if (res.code) {
            message.success(res.msg);
        } else {
            message.warning(res.msg);
        }
    }
    render() {
        const { data, drawerVisible, isAddModal } = this.state
        const columns = [
            {
                title: '角色名字',
                dataIndex: 'name',
                render: (text, record, index) => {
                    // console.log(text, record, index);
                    return <a>{text}</a>
                },
            },
            {
                title: '创建日期',
                dataIndex: 'createTime'
            },
            {
                title: '授权人',
                dataIndex: 'authUser'
            },
            {
                title: '授权日期',
                dataIndex: 'authTime'
            },
            {
                title: '操作',
                width: 250,
                render: (text, record) => (
                    <Space>
                        <Button type="primary" size='middle' danger onClick={() => this.deleteOne(record._id)}>
                            删除
                        </Button>
                        <Button size='middle' danger onClick={()=>this.showDrawer(record._id)}>
                            授权
                        </Button>
                    </Space>
                ),
            },
        ];

        return (

            <Card title={<Button type="primary" onClick={this.showaddModal}>添加角色</Button>} bordered={false}>
                <Table rowKey='_id' columns={columns} dataSource={data} />
                {/* 权限 */}
                <Drawer
                    title="Basic Drawer"
                    onClose={this.onDrawerClose}
                    size='default'
                    placement="right"
                    visible={drawerVisible}
                    extra={
                        <Space>
                            <Button type="primary" onClick={this.addAuth}>
                                提交
                            </Button>
                        </Space>
                    }
                >
                    <Tree
                        checkable
                        treeData={treeData}
                        treeDefaultExpandAll
                        onCheck={this.onTreeCheck}
                    // treeCheckable: true,
                    // showCheckedStrategy: SHOW_PARENT
                    />
                </Drawer>
                {/* 添加角色 */}
                <Modal title="添加角色" visible={isAddModal} onOk={this.handleaddOk} onCancel={this.handleaddCancel}>

                </Modal>
            </Card>


        )
    }
}
